import React, { Component } from "react";
import { View, Animated, Easing } from "react-native";

import { createStyles } from "utils/index";

const styles = createStyles({
  circle: {
    backgroundColor: "#298CF7",
    borderRadius: 400,
  },
});

let animationSlider = null;
class WaterView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modalWidth: new Animated.Value(48), // 弹窗初始宽度
      modalHeight: new Animated.Value(48), // 弹窗初始高度
      modalOpacity: new Animated.Value(10), // 透明度
    };
  }

  componentWillMount() {
    const { auto } = this.props;
    if (auto) {
      this.startAnimated();
    }
  }

  start = () => {
    const { auto = false } = this.props;
    if (!auto) {
      this.startAnimated();
    }
  };

  stop = () => {
    const { auto = false } = this.props;
    if (!auto) {
      Animated.loop(animationSlider).stop();
    }
  };

  startAnimated = () => {
    const { modalHeight, modalWidth, modalOpacity } = this.state;
    modalHeight.setValue(48);
    modalHeight.setValue(48);
    modalOpacity.setValue(10);
    // 同步执行的动画
    animationSlider = Animated.parallel(
      [
        Animated.timing(modalHeight, {
          toValue: 300,
          duration: 4000,
          easing: Easing.linear,
        }),
        Animated.timing(modalWidth, {
          toValue: 300,
          duration: 4000,
          easing: Easing.linear,
        }),
        Animated.timing(modalOpacity, {
          toValue: 0,
          duration: 4000,
          easing: Easing.in,
        }),
      ],
      {
        easing: Easing.back,
      }
    );
    // animationSlider.start(res => {
    //   const { finished } = res;
    //   if (finished) {
    //     const { isShow } = this.state;
    //     if (isShow) {
    //       this.startAnimated();
    //     } else {
    //       modalHeight.setValue(48);
    //       modalHeight.setValue(48);
    //       modalOpacity.setValue(10);
    //     }
    //   }
    // });
    Animated.loop(animationSlider).start();
  };

  render() {
    const { modalHeight, modalWidth, modalOpacity } = this.state;

    return (
      <View
        style={{
          flex: 1,
          alignItems: "center",
          justifyContent: "center",
          height: "100%",
        }}
      >
        <Animated.View
          style={[
            styles.circle,
            {
              height: modalHeight,
              width: modalWidth,
              opacity: modalOpacity.interpolate({
                inputRange: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
                outputRange: [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1],
              }),
              // backgroundColor: modalOpacity.interpolate({
              //   inputRange: [5, 10],
              //   outputRange: ["#66CCFFFF", "#66CCFFFF"],
              // }),
            },
          ]}
        />
      </View>
    );
  }
}

export default WaterView;
